/*
 * @Author: zhaoying
 * @Date: 2020-08-27
 * 图表示例
 */

<template>
    <div class="informationConfirme">

        <!-- 步骤与正文内容分割线 -->
        <div class="splitDiv"></div>


        <div v-if="customerStatus == '不一致' || customerStatus == '一致'" class="formSection">
            <!-- 客户姓名 -->
            <!--<slot-form-input :slotFormSet="slotFormNameSet"></slot-form-input>-->
            <slot-form-customer :slotFormSet="slotFormNameSet"></slot-form-customer>

            <!-- 姓名不一致提示 -->
            <div class="tip" v-if="customerStatus == '不一致'">
                客户问卷填写为"<span>{{orgName}}</span>"，根据手机号查询该客户为"<span>{{realName}}</span>"
            </div>

            <!-- 国家地区 -->
            <slot-form-select :slotFormSet="slotFormAreaSet"></slot-form-select>

            <!-- 手机号码 -->
            <slot-form-input :slotFormSet="slotFormPhoneNumSet"></slot-form-input>

            <!-- 年龄 -->
            <slot-form-age :slotFormSet="slotFormAgeSet"></slot-form-age>

            <!-- 风险偏好 -->
            <slot-form-select :slotFormSet="slotFormRiskSet"></slot-form-select>

        </div>

        <div v-if="customerStatus == '不存在'" class="formSection">
            <!-- 客户姓名 -->
            <!--<slot-form-input :slotFormSet="slotFormNameSet"></slot-form-input>-->
            <slot-form-customer :slotFormSet="slotFormNameSet"></slot-form-customer>

            <!-- 证件类型 -->
            <slot-form-select :slotFormSet="slotFormCardTypeSet"></slot-form-select>

            <!-- 证件号码 -->
            <slot-form-input :slotFormSet="slotFormCardNumberSet"></slot-form-input>

            <!-- 国家地区 -->
            <slot-form-select :slotFormSet="slotFormAreaSet"></slot-form-select>

            <!-- 手机号码 -->
            <slot-form-input :slotFormSet="slotFormPhoneNumSet"></slot-form-input>

            <!-- 年龄 -->
            <slot-form-age :slotFormSet="slotFormAgeSet"></slot-form-age>

            <!-- 客户来源 -->
            <slot-form-select :slotFormSet="slotFormCustomerPropertySet"></slot-form-select>

            <!-- 风险偏好 -->
            <slot-form-select :slotFormSet="slotFormRiskSet"></slot-form-select>
        </div>

        <!-- 下一步 默认灰色不可点击-->
        <mt-button @click="submitForm()" class="bottom" size="large" :disabled="disabled"  ref="nextBtn">下一步</mt-button>

    </div>
</template>

<script>

//表单组件js&less
import form from '@src/common/components/form/form.js'
import '@src/common/components/form/form.less'

import "./informationConfirme.less";
//按钮less
import '@src/common/less/button.less'

// 表单项
import slotFormCustomer from '@src/common/components/form/slot/customer'
import slotFormInput from '@src/common/components/form/slot/input'
import slotFormAge from '@src/common/components/form/slot/age'
import slotFormSelect from '@src/common/components/form/slot/select'

//黑条提示
// import tipAction from "@common/components/otherComponents/tipAction/tipAction"
// import tablea from '@src/common/table/table'
import Steps from '@src/common/components/steps/steps'
import pageTitle from '@src/common/pageTitle/pageTitle'

export default {
    name: "informationConfirme",
    mixins:[form],
    components:{
        Steps,
        pageTitle,
        slotFormInput,
        slotFormAge,
        slotFormSelect,
        slotFormCustomer,
    },
    data() {
        return {
            customerStatus: '不存在', // 状态分为三种： 不一致  一致  不存在

            //客户姓名表单配置项
            // slotFormNameSet: {
            //     params: {
            //         label: '客户姓名',
            //         // unit: '岁',
            //         maxLength: 10,
            //         oninput: true,
            //         'name': 'customerName',
            //         isRequired: true
            //     },
            //     beforeData: null
            // },
            slotFormNameSet: {
                params: {
                    label: '客户姓名',
                    // addBtn: true,
                    showIcon: true,
                    isRequired: true,
                    isDisabled: false,
                    //客户弹层搜索列表的请求接口路径
                    httpUrl : apiUrl.searchCustomerListApi,
                    searchListType: 'zcpzCus',
                    type: '' //url上从列表页带过来的，区分编辑还是新建
                },
                beforeData: null
            },

            // 国家地区表单配置项
            slotFormAreaSet: {
                params: {
                    label: '国家地区',
                    'name': 'area'
                },
                selectList: null,
                beforeData: null
            },

            // 手机号码
            slotFormPhoneNumSet: {
                params: {
                    label: '手机号码',
                    // unit: '岁',
                    maxLength: 11,
                    oninput: false,
                    'name': 'phoneNum',
                    isRequired: true
                },
                beforeData: null
            },

            //年龄表单配置项
            slotFormAgeSet: {
                params: {
                    label: '年龄',
                    // unit: '岁',
                    maxLength: 3,
                    oninput: true,
                    'name': 'age',
                    isRequired: true
                },
                beforeData: null
            },

            // 证件类型
            slotFormCardTypeSet: {
                params: {
                    label: '证件类型',
                    'name': 'cardType'
                },
                selectList: null,
                beforeData: null
            },

            // 证件号码
            slotFormCardNumberSet: {
                params: {
                    label: '证件号码',
                    // unit: '岁',
                    maxLength: 14,
                    oninput: false,
                    'name': 'cardNumber'
                },
                beforeData: null
            },

            // 风险偏好类型
            slotFormRiskSet: {
                params: {
                    label: '风险偏好类型',
                    'name': 'riskType'
                },
                selectList: null,
                beforeData: null
            },

            // 客户来源
            slotFormCustomerPropertySet: {
                params: {
                    label: '客户来源',
                    'name': 'customerProperty'
                },
                selectList: null,
                beforeData: null
            },


            orgName: '郑卫',
            realName: '政立路',
            //按钮状态值
            disabled: true,
            //各项表单没填时的校验提示文字
            validFormElements:{
                "customerName":"请选择客户",
                "age": "请输入客户的年龄",
                "riskType":"请选择客户的风险偏好",
            },
            //存储表单数据，用于提交接口
            formData:{
                customerNo:null,   //客户编号
                customerSource:null,  //客户来源
                customerName:null, //客户姓名
                area:null, // 城市地区
                age: null,//年龄
                phoneNum: null, // 手机号码
                riskType: null,  //风险承受能力
                cardType: null, // 证件类型
                cardNumber: null, // 证件号码
                countryName: null, // 国家
                areaCode: null, // 国家前缀
                customerProperty: null, // 客户来源
                // id: argId ?  argId  : '', //为空时新增，否则为修改
            },

            //跟表单数据对应的字典文案
            formDesc: {
                riskTypeText: null,  //风险承受能力
                cardTypeText: null, // 证件类型
                areaText: null, // 地区
            },

            descArr: {
                riskTypeDic: null,
                countryDic: null,
                cardTypeDic: null,
                customerPropertyDic: [{
                    keyValue: '统一客户', keyNo: 1
                }, {
                    keyValue: '跟踪客户', keyNo: 2
                }],
            },

            //必填的表单的状态
            formBtn: {
                customerNameGet: false,
                ageGet: false,
                phoneNumGet: false,
                cardTypeGet: false,
                cardNumberGet: false,
                riskTypeGet: false,
                areaGet: false,
            },
        };
    },

    mounted(){


        if(this.isWechat) {
            window.addEventListener('scroll', this.handleScroll, true);  // 监听（绑定）滚轮滚动事件
        };

        // this.slotFormAgeSet.beforeData = 25
        // this.slotFormNameSet.beforeData = '征蜀将军'
        // this.slotFormRiskSet.beforeData = '平衡型'
        // this.slotFormAreaSet.beforeData = '中国大陆 86'
        // this.slotFormCardTypeSet.beforeData = '身份证'
        // this.slotFormCardNumberSet.beforeData = '111111111111'
        // this.slotFormPhoneNumSet.beforeData = '13011203619'
        // this.slotFormCustomerPropertySet.beforeData = '理顾宝'

        //风险偏好点击出现的选择列表
        this.slotFormRiskSet.selectList = [{values: ['年假', '事假', '病假', '婚假', '其他']}]
        this.slotFormCardTypeSet.selectList = [{values: ['身份证', '护照']}];
        // this.slotFormCustomerPropertySet.selectList = [{values: ['老带新', '异业拓客', '自由潜客']}];
        this.slotFormAreaSet.selectList = [{values: ['中国大陆 86', '中国大陆 87', '中国大陆 88']}];
        // this.searchPhoneInfo();

    },

    created: function(){
        //请求字典值
        this.getDic();
    },

    watch:{

        //监听formData的变化，如果有变动，修改按钮状态
        formBtn: {
            handler(newVal, oldVal){
                // if (this.customerStatus == '不存在') {
                    if( newVal.phoneNumGet &&  newVal.ageGet && newVal.customerNameGet){
                        //都为true时，修改按钮的状态为可点
                        this.disabled = false
                    }
                    else{
                        //否则不可点
                        this.disabled = true
                    }
                // } else {
                //     if( newVal.phoneNumGet && newVal.customerNameGet && newVal.areaGet &&  newVal.ageGet && newVal.riskTypeGet){
                //         //都为true时，修改按钮的状态为可点
                //         this.disabled = false
                //     }
                //     else{
                //         //否则不可点
                //         this.disabled = true
                //     }
                // }

            },
            deep: true
        },
    },
    methods: {
        /*
        * 资产配置待处理进入信息确认页面时，先根据用户输入的手机号码，查询该用户的信息
        * 1、用户问卷填写的名称与手机号码查询的名称不一致的话，回显查询的名称，并提示
        * 2、一致的话，直接回显
        * 3、如果没有查询到用户问卷中填写的手机号码，说明为新客户，需要新建跟踪客户
        * */
        searchPhoneInfo() {
            this.$axiosHttp.http({
                    name: '根据手机号查询是否为统一客户或者跟踪客户',
                    method: "POST",
                    url: apiUrl.selectByPhoneApi,
                    params:{assetConfigId: this.$route.query.id}
                } ,
                (res) => { //"0000"
                    let data = res.data;
                    if (data.isMatch == 1) {
                        // 成功匹配客户
                        if (this.$route.query.customerName = data.customerName) {
                            // 名称一致
                            this.customerStatus == '一致';
                            //请求回显的年龄和风险承受能力等数据
                            // this.getCustomerAssetDetailByCustomerApi({customerSource: data.customerSource,customerNo: item.customerId })
                        } else {
                            // 名称不一致
                            this.customerStatus == '不一致';
                            //请求回显的年龄和风险承受能力等数据
                            // this.getCustomerAssetDetailByCustomerApi({customerSource: data.customerSource,customerNo: item.customerId })
                        }

                    } else {
                        // 没有匹配到客户
                        // 不存在时，需要用户调取客户列表，然后选择客户信息，反显
                        this.customerStatus == '不存在';

                    }
                },
                (res) => { // 接口错误 4000+
                    	this.$parent.changeLoading(false) //关闭加载条
                    	this.showNoData = true
                },
                (res) => { // 接口返回1000
                    this.showNoData = true
                    this.$parent.changeLoading(false) //关闭加载条
                });
        },

        //客户表单的值变了
        changeCustomerVal( newVal, oldVal, item ){

            item = item || this.formData

            //设置到formData上
            if( !!newVal ){
                this.formData.customerNo = item.custNo ;
                this.formData.customerSource = item.customerSource ;

                this.formBtn.customerNameGet = true

                //请求回显的年龄和风险承受能力数据
                // this.getCustomerAssetDetailByCustomerApi(item)
            }
            else{
                this.formData.customerNo = null ;
                this.formData.customerSource = null ;
                this.formBtn.customerNameGet = false
            }

        },

        //input表单的值变了
        changeInputVal( name, newVal,oldVal ){
            if(!!newVal){
                if( name == 'age'){
                    this.formData.age = newVal;
                    this.formBtn.ageGet = true
                } else if (name == 'phoneNum') {
                    this.formData.phoneNum = newVal;
                    this.formBtn.phoneNumGet = true;
                } else if (name == 'customerName') {
                    this.formData.customerName = newVal;
                    this.formBtn.customerNameGet = true;
                }

                if (this.customerStatus == '不存在') {
                    if (name == 'cardNumber') {
                        this.formData.cardNumber = newVal;
                        this.formBtn.cardNumberGet = true;
                    }
                }
            }
            else{
                if( name == 'age'){
                    this.formData.age = newVal;
                    this.formBtn.ageGet = false
                } else if (name == 'phoneNum') {
                    this.formData.phoneNum = newVal;
                    this.formBtn.phoneNumGet = false;
                } else if (name == 'customerName') {
                    this.formData.name = newVal;
                    this.formBtn.nameGet = false;
                }

                if (this.customerStatus == '不存在') {
                    if (name == 'cardNumber') {
                        this.formData.cardNumber = newVal;
                        this.formBtn.cardNumberGet = false;
                    }
                }
            }
        },

        //select表单的值变了
        changeSelectVal( name, newVal,oldVal){
            if( name == 'riskType'){
                //因为是字典值对应的文案，不能直接设置到formData上
                //先设置到 formDesc上，提交时再根据字典值转换
                this.formDesc.riskTypeText = newVal

                if( !!newVal ){
                    this.formBtn.riskTypeGet = true
                }
                else{
                    this.formBtn.riskTypeGet = false
                }

            } else if (name == 'area') {
                this.formDesc.areaText = newVal;

                if( !!newVal ){
                    this.formBtn.areaGet = true
                }
                else{
                    this.formBtn.areaGet = false
                }

            } else if (name == 'cardType') {
                this.formDesc.cardTypeText = newVal;

                if( !!newVal ){
                    this.formBtn.cardTypeGet = true
                }
                else{
                    this.formBtn.cardTypeGet = false
                }
            }
        },

        //下一步
        submitForm(){
            console.log(this.formData);
            var that = this;

            console.log(this.descArr.riskTypeDic)

            //在字典值接口里找对应的 风险承受能力的值
            this.descArr.riskTypeDic.forEach((el, i, arr) => {
                console.log(el.keyValue, this.formDesc.riskTypeText, el.keyNo)
                if( el.keyValue == this.formDesc.riskTypeText ){
                    this.formData.riskType = el.keyNo
                }
            })

            for(var key in this.formData){
                if(this.formData[key] == "" && this.formData[key] !=0 ){
                    this.formData[key]=null
                }
            }

            //使用json.stringify转换对象会丢失值为空的或是null的
            //对象深拷贝使用objDeepCopy方法
            var $formData = this.$utils.objDeepCopy(this.formData);

            var $validFormElements = this.$utils.objDeepCopy(this.validFormElements);

            console.log($formData)

            //校验表单数据是否填写
            var formCusValid = this.$utils.newFormElValid($formData, $validFormElements);

            if(!formCusValid){
                this.formValid = false;
                return;
            }

            //校验通过
            that.$axiosHttp.http({
                name:'信息确认保存',
                url: apiUrl.updateCustomerAssetFirstStepApi,
                needFailCallback: true,
                params: $formData
            }, (res) => {

                //接口成功
                this.$parent.changeToSteps(2)

            })

            // this.$parent.changeToSteps(2)
            // this.$router.push(goUrl.zcpzQuestionnaireSureUrl)
        },

        //获取字典
        getDic(){
            this.$axiosHttp.http({
                name:'获取字典',
                url: apiUrl.getCustomerAssetDictionaryApi,
                data:["1002"],
            }, (res) => {
                /* 1000是与否
                 1001生命周期阶段
                 1002客户风险承受能力
                 1003资产分类
                 1004资产类别
                 1005项目类型
                 1006细分策略
                 1007家庭未来现金流稳定性*/

                this.descArr.riskTypeDic = res.data.data[1002];  //风险承受能力字典值

                //判断当前页面是作为新建还是编辑
                // this.getData( );

                //设置风险承受能力弹窗数据
                let newRiskArr = []
                this.descArr.riskTypeDic.map(item=>{
                    newRiskArr.push( item.keyValue )
                })
                this.slotFormRiskSet.selectList = [{
                    values: newRiskArr
                }]

                // this.slotFormRiskSet.selectList = this.$utils.parseDifDicArr(this.formDesc.riskTypeDic, 'keyNo', 'keyValue')

                // console.log( this.slotFormRiskSet.selectList )

            }, res => {

            })

            console.log(this.descArr.customerPropertyDic);
            // 假数据 设置风险承受能力弹窗数据
            let newPropertyArr = []
            this.descArr.customerPropertyDic.map(item=>{
                newPropertyArr.push( item.keyValue )
            })
            this.slotFormCustomerPropertySet.selectList = [{
                values: newPropertyArr
            }]
            console.log('==============')
            console.log(newPropertyArr)

            return
            //国家地区
            this.$axiosHttp.http({
                name:'获取国家地区',
                url: apiUrl.getCountryCodeListApi,
                needFailCallback:false,
                params: {countryName: ''}
            }, (res) => {
                this.descArr.countryDic = res.data.data;
                console.log('11111111111111111111111');
                console.log(this.descArr.countryDic);
                //默认设置国家地区为中国
                this.descArr.countryDic.forEach((item, list, arr) => {
                    if( item.id == '10001'){
                        this.formDesc.countryText = item.countryName + ' ' + item.code;
                        this.formData.areaId = item.id;
                    }
                })
            });

            //证件类型和客户来源
            this.$axiosHttp.http({
                name:'获取国家地区',
                url: apiUrl.getCardTypeAndCustSourceApi,
                needFailCallback:false,
                params: {
                    custType: '1'  //资产配置只有个人客户，默认写死为个人
                }
            }, (res) => {
                var data = res.data.data;
                console.log('22222222222222222222')
                console.log(data);
                //证件类型
                this.descArr.cardTypeDic = data.cardType;
                //客户来源
                this.descArr.customerPropertyDic = data.custSource;

                //默认设置客户来源为自由潜客
                this.descArr.customerPropertyDic.forEach((item, list, arr) => {
                    if( item.keyNo == '3'){
                        this.formDesc.customerPropertyText = item.keyValue;
                        this.formData.customerProperty = item.keyNo;
                    }
                })



            });

        },

        //编辑资产配置--回显
        getCustomerAssetDetailById(){

            this.$axiosHttp.http({
                name:'编辑资产配置时进入页面回显',
                url: apiUrl.getCustomerAssetDetailByIdApi,
                params: {
                    id: this.$route.query.id //资产配置id
                }
            }, (res) => {
                var data = res.data.data;

                this.formData.customerNo = data.customerNo; //客户编号
                this.formData.customerSource = data.customerSource; //客户来源
                this.formData.customerName = data.customerName; //客户姓名
                this.formData.riskType = data.riskType ? data.riskType : null;  //风险承受能力
                this.formData.age = data.age ? data.age : null; //年龄

                //获取风险承受能力对应的文案
                var riskArr =  this.descArr.riskTypeDic.filter(function(el){
                    return el.keyNo == data.riskType
                });
                this.formDesc.riskTypeText = (riskArr.length ) ? riskArr[0].keyValue : null;

                //设置回显数据
                this.slotFormNameSet.beforeData = data.customerName
                this.slotFormAgeSet =  Object.assign({}, this.slotFormAgeSet, { beforeData: this.formData.age} )

                this.slotFormRiskSet =  Object.assign({}, this.slotFormRiskSet, { beforeData: this.formDesc.riskTypeText} )

                // this.slotFormAgeSet.beforeData = this.formData.age
                // this.slotFormRiskSet.beforeData = this.formDesc.riskTypeText

                if( data.customerName && data.age && this.formDesc.riskTypeText ){
                    this.slotFormNameSet.isDisabled = true
                }

            })
        },

        //重要-----
        //请求此客户的数据回显到页面上(年龄和风险偏好)
        //这个接口和 selectNewAssetConfigApi 接口不一样的是，没有返回 id
        getCustomerAssetDetailByCustomerApi( item ){

            this.$axiosHttp.http({
                name:'请求客户数据回显到页面上',
                url: apiUrl.getCustomerAssetDetailByCustomerApi,
                params: {
                    customerSource: item.customerSource, //客户来源
                    customerNo: item.customerId  //客户编号
                }
            }, (res) => {
                var data = res.data.data;

                console.log('请求此客户的数据')

                this.formData.customerNo = data.customerNo ? data.customerNo : null; //客户编号
                this.formData.customerSource = data.customerSource ? data.customerSource : null ; //客户来源
                this.formData.customerName = data.customerName ? data.customerName : null; //客户姓名
                this.formData.riskType = data.riskType ? data.riskType : null;  //风险承受能力
                this.formData.age = data.age ? data.age : null; //年龄

                //获取风险承受能力对应的文案
                var riskArr =  this.descArr.riskTypeDic.filter(function(el){
                    return el.keyNo == data.riskType
                });
                this.formDesc.riskTypeText = (riskArr.length ) ? riskArr[0].keyValue : null;


                console.log(this.formData)


                //设置给表单回显的数据

                // this.$set( this.slotFormAgeSet, 'beforeData', this.formData.age)

                this.slotFormNameSet.beforeData = this.formData.customerName

                this.slotFormAgeSet =  Object.assign({}, this.slotFormAgeSet, { beforeData: this.formData.age} )

                this.slotFormRiskSet =  Object.assign({}, this.slotFormRiskSet, { beforeData: this.formDesc.riskTypeText} )

                // this.slotFormRiskSet.beforeData = this.formDesc.riskTypeText

                if( this.formData.customerName && this.formData.age && this.formDesc.riskTypeText ){
                    this.slotFormNameSet.isDisabled = true
                }

                // console.log( '新年龄', this.formData.age )

                // console.log( '新风测', this.formDesc.riskTypeText )

            })
        },

    }
};
</script>

